<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.5.1-缓存内联事件处理函数</title>
</head>
<body>
    <!-- 参考例子 1 -->
    <Comp @change="a + b" />
</body>
    <script>
        /**
         * 缓存内联事件处理函数可以避免不必要的更新
        */

        /**
         * 参考例子 1
         * 编译器会为其创建一个内联事件处理函数
         * - 每次重新渲染时（即 render 函数重新执行时），都会为 Comp 组件创建一个全新的 props 对象
         * - props 对象中 onChange 属性的值也会是全新的函数
         * - 会导致渲染器对 Comp 组件进行更新，造成额外的性能开销
         * */ 
        function render(ctx) {
            return h(Comp, {
                // 内联事件处理函数
                onChange: () => (ctx.a + ctx.b)
            })
        }

        /**
         * 参考例子 1
         * 避免这类无用的更新，我们需要对内联事件处理函数进行缓存
         * - 可以把内联事件处理函数添加到 cache 数组中
         * - 当渲染函数重新执行并创建新的虚拟 DOM 树时，会优先读取缓存中的事件处理函数
         * - 无论执行多少次渲染函数，props 对象中 onChange 属性的值始终不变，于是就不会触发 Comp 组件更新了
         * */ 
         function render(ctx, cache) {
            return h(Comp, {
                // 将内联事件处理函数缓存到 cache 数组中
                onChange: cache[0] || (cache[0] = ($event) => (ctx.a + ctx.b))
            })
        }

        
       

    </script>
</html>